<!-- src/main/resources/templates/mail/promotion.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>探索 ETNOR-API 接口管理平台</title>
    <!-- 引入Google字体，包括艺术字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        /* 基础样式 */
        body {
            font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
            line-height: 1.5;
            color: #333;
            margin: 0;
            padding: 0;
            background-color: #f8f9fa;
        }

        .container {
            max-width: 640px;
            margin: 0 auto;
            padding: 0;
            background-color: #ffffff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
        }

        /* 顶部区域 */
        .hero {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: white;
            padding: 70px 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('');
            opacity: 0.2;
        }

        .hero::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at center, rgba(79, 70, 229, 0.4) 0%, rgba(0, 0, 0, 0) 70%);
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

        .logo {
            margin-bottom: 28px;
            position: relative;
            display: inline-block;
        }

        .logo-text {
            font-size: 32px;
            font-weight: 700;
            letter-spacing: -0.5px;
            color: white;
            margin: 0;
            position: relative;
            display: inline-block;
            background: linear-gradient(90deg, #4f46e5, #60a5fa);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 4px 8px rgba(79, 70, 229, 0.5);
        }

        /* 发光效果 */
        .logo-text::before {
            content: 'ETNOR';
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            color: rgba(79, 70, 229, 0.3);
            filter: blur(8px);
        }

        h1 {
            font-size: 42px;
            font-weight: 700;
            margin: 20px 0 16px;
            line-height: 1.2;
            letter-spacing: -0.5px;
            background: linear-gradient(45deg, #ffffff, #e2e8f0);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hero-subtitle {
            font-size: 20px;
            font-weight: 300;
            margin: 0 auto 30px;
            max-width: 80%;
            opacity: 0.9;
        }

        /* 艺术标语区域 */
        .artistic-tagline {
            position: relative;
            margin: 40px auto;
            padding: 20px 0;
            text-align: center;
        }

        .artistic-tagline::before,
        .artistic-tagline::after {
            content: '';
            position: absolute;
            height: 1px;
            width: 30%;
            top: 50%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5));
        }

        .artistic-tagline::before {
            left: 0;
        }

        .artistic-tagline::after {
            right: 0;
            transform: rotate(180deg);
        }

        .tagline-text {
            font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
            font-size: 32px;
            padding: 0 20px;
            background: linear-gradient(90deg, #a855f7, #3b82f6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            position: relative;
            display: inline-block;
        }

        .tagline-text::before {
            content: attr(data-text);
            position: absolute;
            left: 20px;
            top: 0;
            z-index: -1;
            color: rgba(168, 85, 247, 0.3);
            filter: blur(8px);
        }

        /* 内容区域 */
        .content {
            padding: 60px 40px;
            background-color: #ffffff;
            position: relative;
        }

        .content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 200px;
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
            z-index: 0;
        }

        .greeting {
            margin-bottom: 40px;
            font-size: 18px;
            line-height: 1.6;
            position: relative;
            z-index: 1;
        }

        .greeting .name {
            font-weight: 600;
            color: #4f46e5;
        }

        .section-title {
            font-size: 30px;
            font-weight: 700;
            margin: 0 0 40px;
            text-align: center;
            position: relative;
            color: #0f172a;
        }

        .section-title::after {
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, #4f46e5, #60a5fa);
            margin: 16px auto 0;
            border-radius: 2px;
        }

        /* 特性卡片 */
        .features {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
            margin-bottom: 50px;
            position: relative;
            z-index: 1;
        }

        .feature {
            background: linear-gradient(135deg, #ffffff, #f8fafc);
            border-radius: 16px;
            padding: 40px 30px;
            transition: all 0.3s ease;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
            border: 1px solid #f1f5f9;
            position: relative;
            overflow: hidden;
        }

        .feature:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.1);
        }

        .feature::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(to bottom, #4f46e5, #60a5fa);
            border-radius: 5px 0 0 5px;
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(96, 165, 250, 0.1));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        .feature-icon svg {
            width: 30px;
            height: 30px;
            fill: #4f46e5;
        }

        .feature h3 {
            font-size: 22px;
            margin: 0 0 16px;
            color: #0f172a;
            font-weight: 600;
        }

        .feature p {
            margin: 0;
            font-size: 16px;
            line-height: 1.7;
            color: #64748b;
        }

        /* 荣誉墙 */
        .testimonials {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            padding: 30px;
            border-radius: 16px;
            margin-bottom: 50px;
            position: relative;
            overflow: hidden;
        }

        .testimonials::before {
            content: '"';
            position: absolute;
            top: -20px;
            left: 20px;
            font-size: 180px;
            line-height: 1;
            font-family: serif;
            color: rgba(79, 70, 229, 0.1);
        }

        .testimonials-title {
            text-align: center;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 30px;
            color: #0f172a;
        }

        .testimonial {
            padding: 25px;
            background-color: white;
            border-radius: 12px;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        .testimonial-content {
            font-style: italic;
            margin-bottom: 15px;
            color: #334155;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
        }

        .author-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 12px;
            background-color: #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #64748b;
        }

        .author-info {
            flex: 1;
        }

        .author-name {
            font-weight: 600;
            margin: 0;
            color: #0f172a;
        }

        .author-title {
            font-size: 14px;
            color: #64748b;
            margin: 0;
        }

        /* CTA 区域 */
        .cta-section {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            padding: 50px 40px;
            border-radius: 16px;
            text-align: center;
            margin: 40px 0;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
        }

        .cta-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('');
            opacity: 0.1;
        }

        .cta-title {
            font-size: 28px;
            font-weight: 700;
            margin: 0 0 16px;
            color: white;
        }

        .cta-description {
            font-size: 18px;
            margin-bottom: 30px;
            color: rgba(255, 255, 255, 0.8);
            max-width: 80%;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-button {
            display: inline-block;
            background: linear-gradient(90deg, #4f46e5, #3b82f6);
            color: white;
            padding: 18px 36px;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            font-size: 18px;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(79, 70, 229, 0.4);
            position: relative;
            overflow: hidden;
        }

        .cta-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.5s ease;
        }

        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(79, 70, 229, 0.5);
        }

        .cta-button:hover::before {
            left: 100%;
        }

        /* 客户标志部分 */
        .client-logos {
            text-align: center;
            padding: 30px 0;
            position: relative;
        }

        .logos-title {
            font-size: 16px;
            color: #64748b;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .logos-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
        }

        .client-logo {
            opacity: 0.6;
            transition: opacity 0.3s;
            height: 30px;
        }

        .client-logo:hover {
            opacity: 0.9;
        }

        /* 页脚 */
        .footer {
            text-align: center;
            padding: 50px 40px;
            background-color: #f8fafc;
            border-radius: 0 0 12px 12px;
            font-size: 14px;
            color: #64748b;
            border-top: 1px solid #e2e8f0;
        }

        .social-links {
            margin: 20px 0;
        }

        .social-link {
            display: inline-block;
            margin: 0 10px;
            color: #4f46e5;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }

        .social-link:hover {
            color: #3b82f6;
        }

        .divider {
            height: 1px;
            background-color: #e2e8f0;
            margin: 20px 0;
        }

        .contact-info {
            margin-top: 20px;
        }

        .contact-info a {
            color: #4f46e5;
            text-decoration: none;
            font-weight: 500;
        }

        .contact-info a:hover {
            text-decoration: underline;
        }

        .copyright {
            font-size: 12px;
            color: #94a3b8;
            margin-top: 15px;
        }

        /* 响应式调整 */
        @media screen and (min-width: 600px) {
            .features {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="hero">
        <div class="hero-content">
            <div class="logo">
                <h2 class="logo-text">ETNOR</h2>
            </div>
            <h1>重新定义 API 管理体验</h1>
            <p class="hero-subtitle">简约、高效、专业的接口管理平台</p>

            <!-- 新增艺术标语 -->
            <div class="artistic-tagline">
                <span class="tagline-text" data-text="热爱的事，永不过时">热爱的事，永不过时</span>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="greeting">
            <p>尊敬的 <span class="name" th:text="${recipientName}">用户</span>，</p>
            <p>感谢您对 ETNOR-API 接口管理平台的关注。我们致力于为开发团队打造一个简单易用、功能强大的 API 管理解决方案，助力您实现高效团队协作与卓越项目交付。</p>
        </div>

        <h2 class="section-title">核心优势</h2>

        <div class="features">
            <div class="feature">
                <div class="feature-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 1.5L18.5 9H13V3.5zM8 11h8v2H8v-2zm0 4h8v2H8v-2z"/>
                    </svg>
                </div>
                <h3>智能文档管理</h3>
                <p>自动生成并同步更新 API 文档，支持多版本控制与权限管理，让团队文档始终保持最新状态，有效降低沟通成本。</p>
            </div>

            <div class="feature">
                <div class="feature-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-6 10H6v-2h8v2zm4-4H6v-2h12v2z"/>
                    </svg>
                </div>
                <h3>强大调试工具</h3>
                <p>内置专业级接口调试环境，支持复杂参数配置与环境切换，丰富的预设模板与变量管理，大幅提升开发测试效率。</p>
            </div>

            <div class="feature">
                <div class="feature-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14h-2V9h2v8zm4 0h-2v-6h2v6zm4 0h-2v-4h2v4zM5 13h2v4H5v-4z"/>
                    </svg>
                </div>
                <h3>实时性能监控</h3>
                <p>全方位监控 API 性能指标，提供直观数据分析与智能告警机制，助您快速发现并解决潜在问题，确保系统稳定运行。</p>
            </div>

            <div class="feature">
                <div class="feature-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/>
                    </svg>
                </div>
                <h3>企业级安全保障</h3>
                <p>多层次安全架构设计，完善的权限管理系统与访问控制，支持多种认证方式与数据加密，保障您的 API 资产安全可靠。</p>
            </div>
        </div>

        <!-- 新增荣誉墙部分 -->
        <div class="testimonials">
            <h3 class="testimonials-title">用户心声</h3>

            <div class="testimonial">
                <p class="testimonial-content">"ETNOR-API 彻底改变了我们的开发流程，团队协作效率提升了至少 40%，API 文档再也不是头痛的问题。"</p>
                <div class="testimonial-author">
                    <div class="author-avatar">ZL</div>
                    <div class="author-info">
                        <p class="author-name">张力</p>
                        <p class="author-title">科技公司 CTO</p>
                    </div>
                </div>
            </div>

            <div class="testimonial">
                <p class="testimonial-content">"作为一名开发团队负责人，ETNOR-API 的性能监控功能帮助我们及早发现问题，避免了多次潜在的生产事故。"</p>
                <div class="testimonial-author">
                    <div class="author-avatar">WM</div>
                    <div class="author-info">
                        <p class="author-name">王明</p>
                        <p class="author-title">技术总监</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 新增客户标志部分 -->
        <div class="client-logos">
            <p class="logos-title">受到行业领导者信赖</p>
            <div class="logos-container">
                <!-- 使用占位符替代真实客户标志 -->
                <div class="client-logo">LOGO 1</div>
                <div class="client-logo">LOGO 2</div>
                <div class="client-logo">LOGO 3</div>
                <div class="client-logo">LOGO 4</div>
            </div>
        </div>

        <div class="cta-section">
            <h3 class="cta-title">开启您的 API 管理之旅</h3>
            <p class="cta-description">ETNOR-API 为您的团队带来前所未有的开发体验，立即探索我们的平台。</p>
            <a href="https://www.etnor.xyz/demo" class="cta-button">免费体验</a>
        </div>
    </div>

    <div class="footer">
        <div class="social-links">
            <a href="#" class="social-link">LinkedIn</a>
            <a href="#" class="social-link">Twitter</a>
            <a href="#" class="social-link">GitHub</a>
        </div>

        <div class="divider"></div>

        <div class="contact-info">
            <p>如果您有任何疑问，请随时联系我们：<a href="mailto:support@etnor.xyz">support@etnor.xyz</a></p>
        </div>

        <div class="copyright">
            <p>© 2025 ETNOR Technology. 保留所有权利。</p>
        </div>
    </div>
</div>
</body>
</html>